import { Accordion, Text } from '@aws-amplify/ui-react';

Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components:

<Accordion.Container>
  <Accordion.Item value="sign-in">
    <Accordion.Trigger>
      <Text fontWeight="bold">Sign In</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
    ```js
    I18n.putVocabulariesForLanguage('en', {
      'Sign In': 'Login', // Tab header
      'Sign in': 'Log in', // Button label
      'Sign in to your account': 'Welcome Back!',
      Username: 'Enter your username', // Username label
      Password: 'Enter your password', // Password label
      'Forgot your password?': 'Reset Password',
    });
    ```
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="sign-up">
    <Accordion.Trigger>
      <Text fontWeight="bold">Sign Up</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
    ```js
    I18n.putVocabulariesForLanguage('en', {
      'Create Account': 'Register', // Link text
      'Create a new account': 'New User', // Header text
      'Confirm Password': 'Confirm your password', // Confirm Password label
      Email: 'Enter your email',
      'Phone Number': 'Enter your phone number',
    });
    ```
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="forgot-password">
    <Accordion.Trigger>
      <Text fontWeight="bold">Forgot Password</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
    ```js
    I18n.putVocabulariesForLanguage('en', {
      'Reset your password': 'Forgot your password?',
      'Enter your username': 'Username or Email',
      'Send code': 'Reset my password',
      'Back to Sign In': 'Back to Login',
    });
    ```
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="setup-totp">
    <Accordion.Trigger>
      <Text fontWeight="bold">Setup TOTP</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
    ```js
    I18n.putVocabulariesForLanguage('en', {
      Code: '2FA Code',
      Confirm: 'Confirm 2FA',
      'Back to Sign In': 'Back to Login',
    });
    ```
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Container>
